import React, { useRef, useState } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import Swiper from 'react-native-swiper';
import { WebView } from 'react-native-webview';
import Swipeout from 'react-native-swipeout';
import { Video } from 'expo-av';


const swipeoutBtns = [
  {
    text: '取消关注',
    onPress: () => { },
    type: 'secondary',//default,delete, primary, secondary
    disabled: false
  },
  {
    component: <Button title='删除' />,
  },
  {
    text: '删除',
    color: '#000',
    backgroundColor: '#ccc',
  },
]
const Home = () => {
  const video = useRef(null);
  const [status, setStatus] = useState({});

  return <View style={{ width: '100%', height: 900 }}>
    <View style={{ height: 350 }}>
      <Video
        ref={video}
        style={{ height: 300 }}
        source={{
          uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        }}
        useNativeControls
        resizeMode="contain"
        isLooping
        onPlaybackStatusUpdate={status => {
          setStatus(() => status)
        }
        }
      />
      <Button
        title={status.isPlaying ? 'Pause' : 'Play'}
        onPress={() =>
          status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
        }
      />
    </View>
    <View style={{ height: 100 }}>
      <Swipeout
        buttonWidth={100}
        right={swipeoutBtns}
      >
        <View>
          <Text>Swipe me left</Text>
        </View>
      </Swipeout>
    </View>
    <View style={{ height: 200 }}>
      <Swiper
        style={styles.wrapper}
        showsButtons={true}
        loop={true}
        autoplay={true}
        onIndexChanged={(index) => { }}
      // showsPagination={true}//分页是否显示
      // dot={<View></View>}//默认为24像素的小点
      // dotColor='#000'
      // activeDotColor='#f00'
      // activeDotStyle={ }//激活的时候小圆点变成什么样子
      // nextButton={<Text style={{}}> &gt; </Text>}
      // prevButton={<Text style={{}}> &lt; </Text>}
      >
        <View style={styles.slide}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    </View>
    <View style={{ height: 200 }}>
      <WebView
        source={{ uri: 'https://www.baidu.com' }}
        style={{ marginTop: 20 }}
      />
    </View>



  </View>
}
const styles = StyleSheet.create({
  wrapper: {
    height: 200,
    backgroundColor: '#ccc',
    justifyContent: 'center',
    alignItems: 'center',
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 30,
    fontWeight: '500',
    textAlign: 'center'
  }
})
export default Home;